import { ReactViewState, ReactView, reactControl, ReactViewControl } from "pao-aop-client";

import React from "react";

import { addon, Ref, log, getObject } from "pao-aop";
import { IStencilService, Stencil } from "src/models/stencil";
import FormCreator, { InputType } from "src/business/components/form-creator";
import { FormProps } from "antd/lib/form";
import { GetFieldDecoratorOptions } from "antd/lib/form/Form";
import { UPLOAD_URL, beforeUpload, ROUTE_PATH, STENCIL_ID } from "../../app/util-tool";
import { message } from "antd";
import NTDivStyle from "src/business/style-components/div-style";

/**
 * 组件：模版管理编辑视图状态
 */
export interface ChangeStencilViewState extends ReactViewState {
    /** 单品标识数据源 */
    data?: Stencil;
    /** 是否显示模版选择框 */
    visible?: boolean;
    /** 滚动条 */
    loading?: boolean;
}

/**
 * 组件：模版管理编辑视图
 * 控制模版管理编辑视图
 */
export class ChangeStencilView extends ReactView<ChangeStencilViewControl, ChangeStencilViewState> {
    constructor(props: ChangeStencilViewControl) {
        super(props);
        this.state = {
            data: {}
        };
    }
    /** 返回按钮 */
    onClickBack = () => {
        this.props.history!.push(ROUTE_PATH.stencil);
    }
    /** 提交按钮 */
    onClickSubmit = (e: any, data: Stencil) => {
        this.setState({
            loading: true
        });
        let { [STENCIL_ID]: id } = this.props.match!.params;
        if (id) {
            data.id = id;
        }
        this.saveData(data!)
            .then(() => {
                this.setState({
                    loading: false
                });
                message.info("保存成功");
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("insert_stencil", error.message);
                message.info('保存失败：' + error.message);
            });
    }
    // 保存服务调用
    async saveData(data: Stencil) {
        await this.stencilService!()!.insert_stencil!(data)!;
        this.props.history!.push(ROUTE_PATH.stencil);
    }
    // 查询详情信息
    async queryData(id: string) {
        const data = await this.stencilService!()!.get_stencil!(id)!;
        this.setState({
            data
        });
    }

    // 初始化服务
    stencilService?() {
        return getObject(this.props.stencilService_Fac!);
    }
    componentDidMount() {
        let { [STENCIL_ID]: id } = this.props.match!.params;
        if (id) {
            this.setState({
                loading: true
            });
            this.queryData(id)
                .then(() => {
                    this.setState({
                        loading: false
                    });
                })
                .catch(error => {
                    this.setState({
                        loading: false
                    });
                    log("ChangeStencilViewControl", error.message);
                });
        }
    }
    render() {
        let { data } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 10 },
            },
        };
        let edit_props = {
            loading: this.state.loading,
            form_props: {
                hideRequiredMark: true
            } as FormProps,
            form_items_props: [
                {
                    title: "模版设置",
                    need_card: true,
                    input_props: [
                        {
                            type: InputType.input,
                            label: "模版名称",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请输入模版名称" }],
                                initialValue: data && data!.stencil_name ? data!.stencil_name : '',
                            } as GetFieldDecoratorOptions,
                            decorator_id: "stencil_name"
                        },
                        {
                            type: InputType.customProperties,
                            label: "模版内容",
                            decorator_id: "stencil_value",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请设置模版" }],
                                initialValue: data!.stencil_value
                            } as GetFieldDecoratorOptions,
                            option: {
                                befor_placeholder: '类目名称',
                                after_placeholder: '请输入类目信息',
                                type_key: 'format',
                                before_key: 'label',
                                after_key: 'value',
                                upload_action: UPLOAD_URL,
                                upload_amount: 5,
                                beforeUpload: beforeUpload
                            }
                        }
                    ]
                }],
            form_item_layout: formItemLayout,
            row_btn_props: {
                style: {
                    justifyContent: " center"
                }
            },
            other_btn_propps: [
                {
                    text: "返回",
                    cb: this.onClickBack
                }
            ],
            submit_btn_propps: {
                text: "保存",
                cb: this.onClickSubmit
            }
        };
        return (
            <NTDivStyle.NTDefaultDiv>
                <FormCreator {...edit_props} />
            </NTDivStyle.NTDefaultDiv>
        );
    }
}

/**
 * 控件：模版管理编辑视图
 * 控制模版管理编辑视图
 */
@addon('ChangeStencilView', '模版管理编辑视图', '控制模版管理编辑视图')
@reactControl(ChangeStencilView, true)
export class ChangeStencilViewControl extends ReactViewControl {
    /**
     * 模版管理服务
     */
    public stencilService_Fac?: Ref<IStencilService>;
}